<template>
  <div class="import-page">
    <el-card shadow="never">
      <h2>Excel智能导入工作台</h2>
      <p class="description">
        支持客户、房源、访客单、绩效数据的批量导入，自动AI标签提取
      </p>
      <el-alert
        type="warning"
        :closable="false"
        show-icon
        style="margin-top: 12px"
      >
        <template #title>
          <strong>重要提示：</strong>AI自动化导入每次最多支持20条记录。如需导入更多数据，请将Excel文件拆分为多个不超过20条的文件分批导入。
        </template>
      </el-alert>
    </el-card>

    <!-- 导入类型选择 -->
    <el-card
      shadow="never"
      style="margin-top: 16px"
    >
      <el-tabs
        v-model="activeTab"
        @tab-change="handleTabChange"
      >
        <el-tab-pane
          label="客户导入"
          name="leads"
        >
          <ExcelUploader
            upload-type="leads"
            :template-url="'/templates/leads_template.xlsx'"
            @success="handleUploadSuccess"
          />
        </el-tab-pane>

        <el-tab-pane
          label="房源导入"
          name="properties"
        >
          <ExcelUploader
            upload-type="properties"
            :template-url="'/templates/properties_template.xlsx'"
            @success="handleUploadSuccess"
          />
        </el-tab-pane>

        <el-tab-pane
          label="访客单导入"
          name="visitor-sheets"
        >
          <ExcelUploader
            upload-type="visitor-sheets"
            :template-url="'/templates/visitor_sheets_template.xlsx'"
            @success="handleUploadSuccess"
          />
        </el-tab-pane>

        <el-tab-pane
          label="绩效导入"
          name="performance"
        >
          <ExcelUploader
            upload-type="performance"
            :template-url="'/templates/performance_template.xlsx'"
            @success="handleUploadSuccess"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 导入历史记录 -->
    <el-card
      shadow="never"
      style="margin-top: 16px"
    >
      <h3>导入历史</h3>
      <el-table
        :data="importHistory"
        stripe
      >
        <el-table-column
          prop="filename"
          label="文件名"
          min-width="200"
        />
        <el-table-column
          prop="type"
          label="类型"
          width="120"
        >
          <template #default="{ row }">
            <el-tag>{{ getTypeText(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          label="总数"
          width="100"
        />
        <el-table-column
          prop="success"
          label="成功"
          width="100"
        >
          <template #default="{ row }">
            <span style="color: #52c41a">{{ row.success }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="failed"
          label="失败"
          width="100"
        >
          <template #default="{ row }">
            <span style="color: #f5222d">{{ row.failed }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="导入时间"
          width="180"
        />
        <el-table-column
          label="操作"
          width="150"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              size="small"
              @click="viewReport(row)"
            >
              查看报告
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'ImportPage' })
/**
 * Excel导入页面
 * 演示文件上传和数据导入功能
 */
import { ref, reactive } from 'vue'
import notify from '@/utils/notify'
import type { TabPaneName } from 'element-plus'
import ExcelUploader from '@/components/ExcelUploader.vue'

// ========== 类型定义 ==========
interface ImportRecord {
  id: number
  filename: string
  type: string
  total: number
  success: number
  failed: number
  created_at: string
}

interface UploadResult {
  total: number
  success: number
  failed: number
  errors?: Array<{ row: number; error: string }>
}

// ========== 响应式数据 ==========
const activeTab = ref('leads')
const importHistory = reactive<ImportRecord[]>([])

// ========== 方法 ==========
const handleTabChange = (_tabName: TabPaneName) => {}

const handleUploadSuccess = (result: UploadResult) => {
  notify.success(`导入成功 ${result.success} 条，失败 ${result.failed} 条`)
  // TODO: 刷新历史记录
}

const getTypeText = (type: string) => {
  const map: Record<string, string> = {
    leads: '客户',
    properties: '房源',
    'visitor-sheets': '访客单',
    performance: '绩效',
  }
  return map[type] || type
}

const viewReport = (row: ImportRecord) => {
  notify.info(`查看导入报告: ${row.filename}`)
  // TODO: 打开报告详情对话框
}
</script>

<style scoped>
.import-page h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.description {
  margin: 0;
  color: #666;
  font-size: 14px;
}

h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}
</style>
